<template>
    <a-layout-header 
       v-if="!headerBarFixed"
       :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
       :style="{padding: '0'}"
    >
        <div v-if="mode === 'sidemenu'" class="header" :class="theme">
            <a-icon
                class="trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                 @click="toggle"
               />
            <span>欢迎进入 Jeecg-Boot 企业级低代码平台</span>
        </div>
        <div v-else :class="['top-nav-header-index', theme]">
        <div class="header-index-wide">
            <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
            <logo class="top-nav-header" :show-title="'true'" :style="topMenuStyle.topNavHeader"/>
            <div :style="topMenuStyle.topSmenuStyle">
                <s-menu
                mode="horizontal"
                :menu="menus"
                :theme="theme"
                @updateMenuTitle="handleUpdateMenuTitle"
                ></s-menu>
            </div>
            </div>
            <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
        </div>
      </div>
    </a-layout-header>
</template>
<script>
  import { mixin } from '@/utils/mixin.js'
  import SMenu from '../menu/'
export default {
    name: 'GlobalHeader',
    mixins: [mixin],
    components: {
        SMenu
    },
    props: {
        mode: {
            type: String,
            default: 'sidemenu'
        },
        menus: {
            type: Array,
            required: true
        },
        theme: {
            type: String,
            required: false,
            default: 'dark'
        },
        collapsed: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    data() {
        return {
            // 设置顶部栏是否固定
            headerBarFixed: false,
            topMenuStyle: {
                headerIndexLeft: {},
                topNavHeader: {},
                headerIndexRight: {},
                topSmenuStyle: {}
            },
            chatStatus: '',
        }
    },
    methods: {
      toggle() {
        this.$emit('toggle')
      },
    }
}
</script>